<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导图详情</title>
    <link rel="shortcut icon" href="/static/abl1b-qks1b-001.ico"/>
    <link rel="stylesheet" type="text/css" href="/static/js/jsmind.css">
    <link rel="stylesheet" type="text/css" href="/static/bootstrap-4.6.1-dist/css/bootstrap.css">
    <style>
        #jsmind_container {
            width: calc(100vw);
            height: calc(100vh - 50px);
        }

        .un_selected {
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;
        }
    </style>
    <script src="/static/js/jquery-1.11.3.min.js"></script>
    <script src="/static/js/jsmind.js"></script>
    <script src="/static/js/jsmind.draggable.js"></script>
    <script src="/static/js/jsmind.screenshot.js"></script>
    <script src="/static/js/jsmind.menu.js"></script>
    <script src="/static/js/jsmind.coop.js?d="></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="/static/js/mind/c_m_m.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"></script> <!-- 图标相关-->
    <!-- js 压缩： https://www.toptal.com/developers/javascript-minifier -->
    <script>
        const fetch = function () {
            this.jm = null
            this.coop_mind_id = null
            this.coop_mind_log_id = null
            /**是否通过分享链接访问*/
            this.from_share = null
        }
        // prototype
        fetch.prototype = {
            randomNum: function (minNum, maxNum) {
                switch (arguments.length) {
                    case 1:
                        return parseInt(Math.random() * minNum + 1, 10);
                    case 2:
                        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                    default:
                        return 0;
                }
            },
            expand_all: function () {
                this.jm.expand_all()
            },
            collapse_all: function () {
                this.jm.collapse_all()
            },
            loadMind: function () {
                // 打开已有脑图1、查询数据，组装option 2、实例化jm、show
                let id = `{{ id }}`;
                let u = `{{ u }}`;
                let h = `{{ h }}`;
                const from_share = id.length === 0
                this.from_share = from_share
                const me = this
                const url = from_share ? `s_d?u=${u}&h=${h}` : 'd?id=' + id + `&s_p=b9b101e`;
                $.get(url, function (resp) {
                    if (resp.code === -1) {
                        common_alert(resp.msg)
                        return
                    }
                    // reset
                    me.close_coop_timer_if_necessary()

                    // show
                    let snapshot_data = resp.data.snapshot_data
                    me.coop_mind_id = id

                    const resp_data = resp.data
                    me.coop_mind_log_id = resp_data.mind_log_id
                    const data_format = resp_data.data_format
                    const coop_mind_name = resp.data.coop_mind_name

                    if (from_share) {
                        me.coop_mind_id = resp_data.id
                    }

                    // node_tree 和 node_array 需要被转成对象，freemind 不需要
                    snapshot_data = (data_format === 'node_tree' || data_format === 'node_array') ? JSON.parse(snapshot_data) : snapshot_data
                    me.show_mind(coop_mind_name, data_format, snapshot_data)
                    $('#h1').html(coop_mind_name)
                })
            },
            // 清除定时任务等
            close_coop_timer_if_necessary() {
                if (this.jm && this.jm.coop) {
                    this.jm.coop.clear_timer()
                }
            },
            show_mind: function (name, data_format, data_resp) {
                // options
                const options = {
                    container: 'jsmind_container',
                    editable: true,
                    theme: 'primary',
                    coop_api_url: 'jsmind_op',
                    coop_ws_url: `ws://${window.location.host}/ws/jsmind/`,
                    coop_mind_id: this.coop_mind_id,
                    coop_mind_log_id: this.coop_mind_log_id,
                    menuOpts: {
                        showMenu: true,
                        injectionList: [
                            {target: 'edit', text: '编辑节点'},
                            {target: 'addChild', text: '添加子节点'},
                            {target: 'addBrother', text: '添加兄弟节点'},
                            {target: 'delete', text: '删除节点'},
                            {target: 'screenshot', text: '下载导图'},
                            {target: 'showAll', text: '展开全部节点'},
                            {target: 'hideAll', text: '收起全部节点'}
                        ]
                    },
                    view: {
                        engine: 'svg'   // 思维导图各节点之间线条的绘制引擎
                    }
                }

                // mind
                const mind = {
                    /* 元数据，定义思维导图的名称、作者、版本等信息 */
                    meta: {name: name, author: 'cy20081118148@163.com', version: '0.2'},
                    /* 数据格式声明 */
                    format: data_format,
                    /* 数据内容 */
                    data: {id: 'root', topic: 'jsMind'}
                }
                // eslint-disable-next-line new-cap
                let jsMind = window.jsMind
                this.jm = new jsMind(options)
                if (data_resp) {
                    mind.data = data_resp
                }
                this.jm.show(mind)
            },
            /**收藏或者取消收藏*/
            star: function () {
                const coop_mind_id = this.coop_mind_id
                // ajax start
                $.ajax({
                    type: "post",
                    url: "star",
                    headers: {"X-CSRFToken": $.cookie("csrftoken")},
                    data: {'coop_mind_id': coop_mind_id},
                    dataType: "json",
                    success: function (resp) {
                        common_alert(resp.msg)
                    },
                    async: false
                });
                // ajax end
            },
            /**取消收藏*/
            un_star: function () {
                const coop_mind_id = this.coop_mind_id
                // ajax start
                $.ajax({
                    type: "delete",
                    url: "star",
                    headers: {"X-CSRFToken": $.cookie("csrftoken")},
                    data: {'coop_mind_id': coop_mind_id},
                    dataType: "json",
                    success: function (resp) {
                        common_alert(resp.msg)
                    },
                    async: false
                });
                // ajax end
            }
        }

        /***/
        $(function () {
            const xxObj = new fetch()
            xxObj.loadMind()
            window.xxObj = xxObj
        })
    </script>
</head>
<body>
<!--  -->
<div style="position: absolute;top: 0px;z-index: 1000;cursor: pointer;" onclick="xxObj.collapse_all()"><span data-feather="folder-minus"></span><span class="un_selected">折叠</span></div>
<div style="position: absolute;top: 0px;left:80px;z-index: 1000;cursor: pointer;" onclick="xxObj.expand_all()"><span data-feather="folder-plus"></span><span class="un_selected">展开</span></div>
<div style="position: absolute;top: 0px;left:160px;z-index: 1000;cursor: pointer;" onclick="xxObj.star()"><span data-feather="star"></span><span class="un_selected">收藏</span></div>
<div style="position: absolute;top: 0px;left:240px;z-index: 1000;cursor: pointer;" onclick="xxObj.un_star()"><span data-feather="arrow-up-circle"></span><span class="un_selected">取消收藏</span></div>
<h3 id="h1" style="text-align: center;max-height: 40px;"></h3>
<div id="jsmind_container"></div>
</body>
<script>
    if (window.feather) {
        window.feather.replace();
    }
</script>
</html>